<template>
    <div class="minishop-msxqCheck  pt15">
        <template v-if="room">
        <div class="plr15">
            <div class="photo">
                <img class="" :src="room.images[curImg]" alt="">
            </div>
            <div class="mt15">
                <div class="scroll kitbox">
                    <div @click="curImg = i" class="item " v-for="(item, i) in room.images" :key="i" >
                        <img class="photo" :src="item" alt="">
                    </div>
                </div>
            </div>
            <div class="title kitbox pt15">
                <div class="flex1 c-000 f-bold fs-15">{{room.title}}</div>
                <div class="pt5 share-wrap">
                    <button data-name="shareBtn" class="shareBtn" open-type="share">转发</button>
                    <img class="share" src="/static/images/share-c.png" alt="">
                </div>
            </div>
            <div class="fs-12 c-9e9e9e pt7">
                {{room.address}}
            </div>
        </div>

        <div class="plr15 kitbox fs-15 c-999 pt20">
            <div class=" c-c9994a" >房型</div>
            <!-- <div @click="callMobile" class="fs-12 c-c9994a flex1 tr pt2">联系我们</div> -->
        </div>

        <div class="plr15">
            <div @click="link('/index/xzrq?startDate='+ startDate +'&endDate='+ endDate)" class="kitbox mt13 fs-12 c-fff date-section plr12">
                <div class="flex1 pt5">
                    <div>入住</div>
                    <div class="pt2">{{startDate}} {{startWeek}}</div>
                </div>
                <div class="pt16">
                    <div class="icon">共{{days}}晚</div>
                </div>
                <div class="tr flex1 pt5">
                    <div>离店</div>
                    <div class="pt2">{{endDate}} {{endWeek}}</div>
                </div>
            </div>
            <div class="pt20">
                <div class="c-222 f-bold fs-14">客房概况</div>
                <div class="fs-12 c-333 pt10">
                    <div v-html="room.detail"></div>
                </div>
            </div>

            <div class="pt20">
                <div class="c-222 f-bold fs-14">配置设施</div>
                <div class="tags fs-12 c-333 pt10 plr10">
                    <div class="tag">
                        <img class="v-middle" mode="widthFix" src="/static/images/kt.png" alt="">
                        <span class="v-middle ml15">空调</span>
                    </div>
                    <div class="tag ">
                        <img class="v-middle" mode="widthFix" src="/static/images/dsj.png" alt="">
                        <span class="v-middle ml15">电视</span>
                    </div>
                    <div class="tag tr">
                        <img class="v-middle" mode="widthFix" src="/static/images/ch.png" alt="">
                        <span class="v-middle ml15">窗户</span>
                    </div>
                    <div class="tag">
                        <img class="v-middle" mode="widthFix" src="/static/images/dlwy.png" alt="">
                        <span class="v-middle ml15">独立淋浴</span>
                    </div>
                    <div class="tag ">
                        <img class="v-middle" mode="widthFix" src="/static/images/wifi.png" alt="">
                        <span class="v-middle ml15">免费wifi</span>
                    </div>
                    <div class="tag tr">
                        <img class="v-middle" mode="widthFix" src="/static/images/reshui.png" alt="">
                        <span class="v-middle ml15">热水</span>
                    </div>
                </div>
            </div>

            <div class="pt20">
                <div class="c-222 f-bold fs-14">入住政策</div>
                <div class="fs-12 c-333 pt10">
                    <div v-html="room.policy"></div>
                </div>
            </div>
        </div>

        <div class="bgc-fff plr15 mt20">
            <div class="kitbox pt20">
                <div>订房数量</div>
                <div class="flex1 tr">
                    <van-stepper :max="maxCount" :min="minCount" :disable-input="true" :value="count" v-on:change="countChange"/>
                </div>
            </div>
            <div class="pt15 pb16">
                <van-button :disabled="count==0" @click="toAddOrder" type="primary" color="#c59d5d" block>确定</van-button>
            </div>
        </div>
        </template>
    </div>
</template>

<script>
import roomApi from "@/api/api-room";
import cardApi from "@/api/api-card";

import moment from '@/plugins/utils/moment.js'
export default {
    data () {
        var weekday = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
        // var day = moment().format('YYYY-MM-DD'),
        //     week =  weekday[moment().weekday()]
        return {
            curImg: 0,
            id: "",
            room: undefined,
            count: 1,
            startDate: "",
            endDate: "",
            startWeek: "",
            endWeek: "",
            days: 0,
            weekday,
            maxCount: 1,
            minCount: 1
        }
    },
    watch: {
        '$store.getters.logined': {
            handler(n, o){
                if(n){
                    
                }
            }
        },
    },
    components: {
        
    },
    onLoad(options){
        this.id = options.id
        this.houseId = options.houseId || ""
        this.placeId = options.placeId || ""

        if(options.startDate){
            this.startDate = options.startDate
            this.endDate = options.endDate
            this.startWeek = this.weekday[moment(this.startDate).weekday()]
            this.endWeek = this.weekday[moment(this.endDate).weekday()]
            this.days = moment(this.endDate).diff(moment(this.startDate), 'days');  

            // this.startWeek = options.startWeek
            // this.endWeek = options.endWeek
            // this.days = options.days
        }
    },
    mounted () {
        this.initPage()
    },
    onShow(){
        if(wx.getStorageSync("search-mslb") == 1){
            this.startDate = wx.getStorageSync("search-mslb-startDate") || ""
            this.endDate = wx.getStorageSync("search-mslb-endDate") || ""
            this.startWeek = this.weekday[moment(this.startDate).weekday()] 
            this.endWeek = this.weekday[moment(this.endDate).weekday()]
            this.days = moment(this.endDate).diff(moment(this.startDate), 'days');  
            this.ListRoom() 
        }
        wx.removeStorageSync("search-mslb")
    },
    methods: {
        initPage(){
            this.GetRoom()
            this.ListCard()
        },
        GetRoom(){
            roomApi.GetRoom({
                roomId: this.id
            }).then(data => {
                this.room = data.result
            })
        },
        countChange(e){
            this.count = e.mp.detail
        },
        toAddOrder(){
            if(this.count===0){
                return
            }
            this.link('/personal/order/add?startDate='+ this.startDate +'&endDate='+ this.endDate +"&roomId="+ this.id +"&days="+ this.days +"&count="+ this.count)
        },
        callMobile(){
            wx.makePhoneCall({
                phoneNumber: this.room.mobile
            })
        },
        ListCard(){
            cardApi.ListCard({
                pageIndex: 1,
                pageSize: 999
            }).then(res => {
                res = res.result
                this.maxCount = (res.List && res.List.length) || 0
                if(this.maxCount===0){
                    this.minCount = 0
                    this.count = 0
                }
            })
        },
        ListRoom(){
            roomApi.ListRoom({
                keyword: "",
                roomId: this.id,
                houseId: "",
                placeId: "",
                start_date: this.startDate,
                end_date: this.endDate,
                pageIndex: 1,
                pageSize: 999
            }).then(data => {
                var list = data.result.List.filter(v=>{
                    return v.roomId == this.id
                })
                if(list&&list.length>0){

                } else {
                    this.maxCount = 0
                    if(this.maxCount===0){
                        this.minCount = 0
                        this.count = 0
                        wx.showToast({
                            title: "当前有不可预定时间，请重新选择",
                            icon: "none",
                            duration: 2000
                        })
                    }
                }
            })
        },
    },
    onShareAppMessage( options ){
        var that = this;
        // 设置菜单中的转发按钮触发转发事件时的转发内容
        var shareObj = {
            title: this.room.title,// 默认是小程序的名称(可以写slogan等)
            path: '/pages/index/msxqCheck?startDate='+ this.startDate +'&endDate='+this.endDate+"&id="+ this.id,// 默认是当前页面，必须是以‘/’开头的完整路径
            imageUrl: "",//自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
            success: function(res){
                // 转发成功之后的回调
                if(res.errMsg == 'shareAppMessage:ok'){
                    wx.showToast({
                        title: "分享成功",
                        icon: "success",
                        duration: 2000
                    })
                }
            },
            fail: function() {
                // 转发失败之后的回调
                if(res.errMsg == 'shareAppMessage:fail cancel'){
                    // 用户取消转发
                
                }else if(res.errMsg == 'shareAppMessage:fail'){
                    // 转发失败，其中 detail message 为详细失败信息
                    wx.showToast({
                        title: "分享失败",
                        icon: "success",
                        duration: 2000
                    })
                }
            },
            complete: function () {
                
            }
        };
        // 来自页面内的按钮的转发
        if( options.from == 'button' ){
            　
        }
        // 返回shareObj
        return shareObj;
    },
}
</script>

<style  lang="scss">
@import './scss/msxq.scss';
</style>
